<template>
  <view class="wrap">
     <top-tab tabTitle="购买详情" @backClick="backClick"></top-tab>
		 <view class="triangle">恭喜您！</view>
		 <view class="icon-succeed">
			 <view class="iconfont">&#xe60a;</view>
			 <view class="succeed-title">交易已成功</view>
		 </view>
		 <view class="main">
			<view class="card">
				<view class="club-card">青铜会员卡</view>
				<view class="card-list">
					<view class="card-title-name">
						<text class="order">订单号：</text><text>65464645645</text>
					</view>
					<view class="card-title-name">
						<text class="order">交易金额：</text><text>999.00</text>
					</view>
					<view class="card-title-name">
						<text class="order">开通时间：</text><text>2021-9-2 16:50</text>
					</view>
					<view class="card-title-name" style="margin-bottom: 60rpx;">
						<text class="order">截止时间：</text><text>2021-9-2 16:50</text>
					</view>
				</view>
				<view class="footer">
					<image class="use-img" src="/static/my/use.png"></image>
					<view class="time">2019-01-11</view>
				</view>
			</view>
			<view class="footer-btn">已激活</view>
		 </view>
  </view>
</template>

<script>
	import topTab from '@/components/top-tabbar.vue'
  export default {
		components: { topTab },
    data() {
      return {}
    },
  onShow() {},
  methods: {
		// 返回上一页
		backClick() {
			uni.navigateTo({
			    url: '/pages/my/buy_vip/buy_record'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.wrap{
		background: #FA5355;
		height: 100vh;
		.triangle{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			margin: 30rpx 0 36rpx 0;
		}
		.icon-succeed{
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			margin-bottom: 78rpx;
			.iconfont{
				margin-right: 13rpx;
				font-size: 48rpx;
			}
			.succeed-title{
				font-size: 48rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
		.main{
			padding: 0 42rpx;
			.card{
				width: 100%;
				// height: 723rpx;
				 overflow: hidden;
				background:#FFFFFF;
				position: relative;
				padding-bottom: 50rpx;
			}
			.card:after,.card:before{
				content: '';
				display: block;
				width: 100%;
				position: absolute;
				border-top: 10px dotted #FA5355;
				transform:translateY(-50%);
			}
		  .card:after{
					top:0;
					transform:translateY(-50%);
			}
			.card:before{
					bottom: 0;
					transform:translateY(50%);
			}
			.club-card{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #0A0A0A;
				padding: 47rpx 0 37rpx 35rpx;
				border-bottom: 1px solid #F2F2F2;
			}
			.card-list{
				padding: 46rpx 0 0 30rpx;
				.card-title-name{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					margin-bottom: 40rpx;
					.order{
						width: 100rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #838383;
						margin-right: 40rpx;
					}
				}
			}
			.footer{
				
				.time{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
					text-align: center;
					margin-top: -24rpx;
				}
				.use-img{
					display: block;
					width: 190rpx;
					height: 190rpx;
					margin-left: auto;
					margin-right: 37rpx;
				}
			}
		}
		.footer-btn{
			width: 356rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			line-height: 96rpx;
			text-align: center;
			margin: auto;
			margin-top: 92rpx;
		}
	}
</style>
